<template>
  <div id="ai">
    <div class="step-one">
      <div class="all-title">AI智能分析</div>
      <AIComponents />
    </div>
    <div class="step-two">
      <div class="all-title">学生智能体应用使用日志</div>
      <div class="all-box">
        <div class="two-search">
          <div>时间段：</div>
          <el-date-picker
            v-model="form.startTime"
            type="date"
            size="large"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            placeholder="开始时间"
          />
          -
          <el-date-picker
            v-model="form.endTime"
            type="date"
            size="large"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            placeholder="结束时间"
          />
          <el-input
            v-model="form.word"
            clearable
            style="width: 240px"
            placeholder="输入关键信息"
          />
          <div
            class="all-btn"
            @click="search"
          >搜索</div>
        </div>
        <div>
          <el-table
            :data="tableData"
            v-loading="loading"
            element-loading-text="加载中..."
            :element-loading-spinner="svg"
            style="width: 100%"
          >
            <el-table-column
              prop="created_at"
              label="时间"
              width="180"
            />
            <el-table-column
              prop="from_end_user_session_id"
              label="用户"
              width="180"
            />
            <el-table-column
              prop="name"
              label="标题"
            />
            <el-table-column
              prop="message_count"
              label="消息数"
              width="100"
            />
            <el-table-column
              label="操作"
              width="100"
            >
              <template #default="scope">
                <div class="table-btns">
                  <div @click="handleDetail(scope.row)">详情</div>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="all-page">
            <el-pagination
              v-model:current-page="form.page"
              :page-size="10"
              layout="prev, pager, next, jumper"
              :total="total"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      v-model="isShowAI"
      :close-on-click-modal="false"
      width="80%"
      align-center
      :before-close="handleClose"
    >
      <div class="my-dialog">
        <div
          v-if="isShowAI"
          class="my-dialog-content"
        >
          <Agent4 :conversationId="conversationId" />
        </div>
      </div>
    </el-dialog>
  </div>
</template>
  
  <script>
import AIComponents from "@/components/AIComponents.vue";
import Agent4 from "@/components/Agent4.vue";
export default {
  components: {
    AIComponents,
    Agent4,
  },
  data() {
    return {
      isShowAI: false,
      loading: false,
      total: 1000,
      form: {
        startTime: "",
        endTime: "",
        word: "",
        page: 1,
        limit: 10,
      },
      tableData: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleDetail(row) {
      this.conversationId = row.id;
      this.isShowAI = true;
    },
    handleClose() {
      this.isShowAI = false;
    },
    search() {
      //如果结束日期小于起始日期，则提示错误，日期格式为YYYY-MM-DD，转换为时间戳
      if (new Date(this.form.startTime) > new Date(this.form.endTime)) {
        this.$message.error("结束日期不能小于起始日期");
        return;
      }
      this.form.page = 1;
      this.getList();
    },
    handleCurrentChange(currentPage) {
      this.form.page = currentPage;
      this.getList();
      console.log(currentPage, 333);
    },

    getList() {
      const url = "/dify/logs";
      const params = this.form;
      this.loading = true;
      this.$axios
        .get(url, {
          params, // 将参数传递给 `params` 属性
        })
        .then((response) => {
          const res = response;
          this.tableData = res.data;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
#ai {
  .step-one {
    margin-bottom: 33px;
  }
  .step-two {
    .all-box {
      padding: 38px 52px;
    }
    .two-search {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 34px;
      :deep(.el-input__inner) {
        height: 38px;
      }
      .all-btn {
        height: 36px;
        line-height: 36px;
      }
    }
    .el-table {
      margin-bottom: 20px;
      :deep(th) {
        color: #7a8cb0;
      }
      .table-btns {
        display: flex;
        gap: 20px;
        > div {
          cursor: pointer;
          color: #457aff;
          &:hover {
            color: #2657b8;
          }
        }
      }
    }
  }
  :deep(.el-dialog) {
    background: none;
    box-shadow: none;
    .my-dialog {
      padding: 10px 0;
    }
    .my-dialog-content {
      height: 80vh;
      iframe {
        height: 100%;
      }
    }
    .el-dialog__close {
      color: #333;
      background: #aaabad;
      border-radius: 50%;
      padding: 2px;
    }
  }
}
</style>
